<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="sch_head xh_head flexbox flexcenter flexbetween">
            <div class="font_16 color_01">{{getProName(queryInfo)}}</div>
            <el-button plain size="small" class="plain_blue" @click="downloadFile">
                <div class="flexbox flexcenter flexjust">
                    <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    导出数据
                </div>
            </el-button>
        </div>
        <div class="flexbox flexcenter flexbetween type_select">
            <el-radio-group v-model="queryInfo.job" size="small" @change="getDataList()">
                <el-radio-button label="editor_uid">剪辑</el-radio-button>
                <el-radio-button label="director_uid">编导</el-radio-button>
                <el-radio-button label="photographer_uid">拍摄</el-radio-button>
            </el-radio-group>
            <div class="font_14 color_02">
                数据日期：{{queryInfo.need_date.join(' ~ ')}}
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="nickname" label="项目人员" min-width="150">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <span class="name_head">{{scope.row.nickname | keepOneNumS}}</span>
                            {{scope.row.nickname}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="avg_cost" label="平均消耗" width="140">
                    <template slot-scope="scope">
                        {{scope.row.avg_cost?scope.row.avg_cost:'0'}}
                    </template>
                </el-table-column>
                <el-table-column prop="reject_num" label="卡审数" width="140">
                    <template slot-scope="scope">
                        {{scope.row.reject_num?scope.row.reject_num:'0'}}
                    </template>
                </el-table-column>
                <el-table-column prop="total_num" label="视频条数" width="140">
                    <template slot-scope="scope">
                        {{scope.row.total_num?scope.row.total_num:'0'}}
                    </template>
                </el-table-column>
                <el-table-column prop="stat_cost_live" label="直播消耗" width="140">
                    <template slot-scope="scope">
                        {{scope.row.stat_cost_live?scope.row.stat_cost_live:'0'}}
                    </template>
                </el-table-column>
                <el-table-column prop="stat_cost_video" label="短视频消耗" width="140">
                    <template slot-scope="scope">
                        {{scope.row.stat_cost_video?scope.row.stat_cost_video:'0'}}
                    </template>
                </el-table-column>
                <el-table-column prop="stat_cost" label="总消耗" width="180">
                    <template slot-scope="scope">
                        <span class="cost_font">{{scope.row.stat_cost?scope.row.stat_cost:'0'}}</span>
                        <div class="cost_ratio">
                                <div>较上周期</div>
                                <div class="ratio" style="color: #00C271;" v-if="costrate(scope.row.stat_cost_round_rate) == 'dow'">
                                    <img src="../../assets/img/decline.svg"/> <span> {{ (scope.row.stat_cost_round_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" style="color: #FE6262;" v-else-if="costrate(scope.row.stat_cost_round_rate) == 'up'">
                                    <img src="../../assets/img/rise.svg"/> <span> {{ (scope.row.stat_cost_round_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" v-else>——</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import downLoad from "../../excel/ExportDown";
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                need_date: [],
                channel:'',
                brand_name:"",
                product_name:"",
                business_scene:"",
                area:"",
                job:"editor_uid",
            },
            tableData: [],
        };
    },
    computed: {
        costrate(){
            return (data) => {
                if(data == 0){
                 return '-'
                }else if(data > 0){
                 return 'up'
                }else{
                 return 'dow'
                }
            }
        }
    },
    created() {
        this.queryInfo.need_date = this.$route.query.need_date
        this.queryInfo.channel = this.$route.query.channel
        this.queryInfo.brand_name = this.$route.query.brand_name
        this.queryInfo.product_name = this.$route.query.product_name
        this.queryInfo.business_scene = this.$route.query.business_scene
        this.queryInfo.area = this.$route.query.area
        this.getDataList();
    },
    methods: {
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/adminapi/materialv2/projectDataPersonal",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
            }
        },

        getProName(row){
            let brand = row.brand_name
            let product = row.product_name
            let area = ''
            let scene = ''
            if(row.business_scene==1){
                scene = '短视频原创'
            }else if(row.business_scene==2){
                scene = '短视频混剪'
            }else if(row.business_scene==3){
                scene = '直播素材'
            }else if(row.business_scene==4){
                scene = '直播直投'
            }else if(row.business_scene==5){
                scene = '短视频'
            }else if(row.business_scene==6){
                scene = '直播'
            }

            if(row.area==1){
                area = '深圳'
            }else if(row.area==2){
                area = '杭州'
            }
            
            return brand+'_'+product+'_'+scene+'_'+area
        },

        downloadFile() {
            var excelDatas = [
                {
                    tHeader: ["项目人员", "平均消耗", "卡审数", "视频条数", "直播消耗", "短视频消耗", "总消耗"],
                    filterVal: [
                        "nickname",
                        "avg_cost",
                        "reject_num",
                        "total_num",
                        "stat_cost_live",
                        "stat_cost_video",
                        "stat_cost",
                    ],
                    tableDatas: this.tableData,
                    sheetName: "人员消耗统计",
                },
            ];
            downLoad(excelDatas, "人员消耗统计");
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.cost_ratio{
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #B4B7BD;
}
.ratio{
    padding-left: 8px;
    display: flex;
    /* align-items: center; */
}
.ratio img{
    padding-top: 2px;
    padding-right: 2px;
    width: 16px;
    height: 16px;
}
.xh_head{
    padding: 0;
    margin: 0 20px;
}
.type_select{
    padding: 20px 20px 0 20px;
}
.name_head{
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: #4475ff;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.cost_font {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #17233d;
}
</style>

